<template>
  <section class="echartBox-wrapper">
    <div
      class="title-box"
      :style="{
        borderColor:title.direction==='left'?'#4193e3':'transparent',
        textAlign: title.direction ? title.direction : 'center',
        paddingLeft: title.direction ? '20px' : '0',
      }"
    >
     <i class="title-tip" v-show="title.direction === 'left'"></i>
      <span>{{ title.heading }}</span>
      <span v-if="title.secondary">{{ title.secondary }}</span>
    </div>

     <a-spin :spinning="loadSpinning" tip="数据加载中..." style="height:100%;">
    <div class="echart-box" :ref="id"></div>
     </a-spin>
</section>
</template>
<script>
// import * as Echarts from "echarts";
// import "../echarts/index"
// let echarts = require("echarts/lib/echarts");
import echarts from "../echarts/index";
export default {
  props: ["id", "title", "echartsData"],
  data() {
    return {
      loadSpinning:true
    };
  },
  mounted() {},
  watch: {
    echartsData: {
      handler(newVal) {
        if (newVal) {
          this.initData(this.echartsData.seriesData);
          this.$nextTick(() => {
            this.loadSpinning=false;
            this.renderEchart();
          });
        }
      },
      deep: true,
      immediate: true,
    },
  },

  methods: {
    initData(seriesData) {
      if (seriesData) {
        return seriesData.map((item) => {
          const obj = {
            name: item.name,
            type: "bar",
            barWidth: "20",
            data: item.data,
          };
          if (item.stack) {
            obj.stack = item.stack;
          }
          return obj;
        });
      }
    },
    renderEchart() {
      //2.初始化
      const myChart = echarts.init(this.$refs[this.id]);
      //3.配置数据
      let option = {
        // title: {
        //   text: "资产总览",
        //   x: "center",
        //   top: 10,
        //   textStyle: {
        //     color: "#48A3F9",
        //   },
        // },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(25,62,119,0.4)",
          borderColor: "#4372B9",
          textStyle: {
            color: "#fff",
          },
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
            formatter:(params)=> {
            let res = "", axisValueLabel="";
            params.forEach((item) => {  
                          
              axisValueLabel=item.axisValue
              res += `<li>
               ${item.marker} ${item.seriesName} ${item.value}${this.echartsData.dataUnit?this.echartsData.dataUnit:this.echartsData.seriesData.filter(it=>it.name===item.seriesName)[0].unit}</li>`;
            });
            return `<div>${axisValueLabel}</div>
              <ul>${res}</ul>`;
          },
        },
        legend: {
          right: 20,
          top: 0,
          data:
            this.echartsData.seriesData &&
            this.echartsData.seriesData.map((item) => item.name),
          itemHeight: 4,
          itemWidth: 14,
          textStyle: {
            color: "#fff",
            fontSize: 10,
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "8%",
          top: 40,
          containLabel: true,
        },
        color: this.echartsData.color,
        xAxis: [
          {
            type: "category",
            data: this.echartsData.axisData,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4F73A5",
                type: "solid",
              },
            },
            axisLabel: {
              interval: this.echartsData.interval||0,
              rotate:this.echartsData.rotate||0,
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              show: true,
              lineStyle: {
                color: "#4F73A5",
                type: "solid",
              },
            },

            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
            splitLine: {
              show: this.echartsData.splitLine, //想要不显示网格线，改为false
              lineStyle: {
                color: "#1A365F",
              },
            },
          },
        ],
        series: this.initData(this.echartsData.seriesData),
      };
      // 4.传入数据
      myChart.setOption(option);
      // 自动调节echarts的大小
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      // 销毁调节echarts的大小
      this.$on("hook:destroyed", () => {
        window.removeEventListener("resize", () => {
          myChart.resize();
        });
      });
    },
  },
};
</script>
<style lang="scss">
$titleHeight: 30px;
$titleMargin: 6px;
.echartBox-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .title-box {
    height: $titleHeight;
    line-height: $titleHeight;
    margin: $titleMargin 0;
    font-size: 16px;
    font-weight: bold;
    color: #4193e3;
     .title-tip {
      display: inline-block;
      width: 3px;
      height: 20px;
      background: #4193e3;
      vertical-align: middle;
      margin-right:10px;
    }
  }
  .echart-box {
    height: calc(100% - #{$titleHeight} - 2 * #{$titleMargin});
    width: 100%;
  }
}
</style>
